Shadows

Box-Shadow:

Come to think of it, I haven't written anything about this yet, even though I have been using this for quite some time now. The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. As you can see, the effect of border-radius propery is also extended to the box-shadow.

Card 1

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni dolor iste rem non excepturi quibusdam consequuntur porro eveniet quod soluta sint odio laudantium quis, placeat dolorem perspiciatis, quam libero officiis cum architecto!

Card 2

Card 3


#card-1 {
    box-shadow: 5px 5px rgb(65, 0, 70);
}

#card-2 {
    box-shadow: -6px 9px 10px rgb(0, 70, 1);
}

#card-3 {
    box-shadow: inset 0px 0px 50px -10px rgb(0, 0, 0);
}

Possible Syntax (without inset):

box-shadow: X-Offset Y-Offset color;
box-shadow: X-Offset Y-Offset Blur-Radius color;
box-shadow: X Y Blur-Radius Spread-Radius color;

Examples:


/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow:
3px 3px red,
-1em 0 0.4em olive;

/* Default color is black */
box-shadow: 4px 5px 0px 10px;

About the Inset:

If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content). The presence of the inset keyword changes the shadow to one inside the frame (as if the content was debossed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content. Blur-radius and spread-radius become highly confusing to deal with, with the inset activated.

Blur-Radius:

This is a third value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be 0 (the shadow's edge is sharp). The specification does not include an exact algorithm for how the blur radius should be calculated.

Spread-Radius:

Basically, how big the shadow should be. Can be negative.

Use the box-shadow generator or the chrome-dev tools to fine tune the confusing parameters.

Text-Shadow:

The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its decorations. Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.

The syntax of text-shadow is quite similar to the box-shadow. The only difference being the lack of inset and spread-radius parameters.

TEXT_SHADOW-1

TEXT_SHADOW-2

TEXT_SHADOW-3

As you can observe in the second example, the default color of the text-shadow is the same as the text.


#text-shadow-1 {
    text-shadow: rgb(152, 243, 255) 0 0 10px;
}

#text-shadow-2 {
    text-shadow: 5px 10px;
}

#text-shadow-3 {
    text-shadow: 1px 1px 0px rgb(212, 255, 0),
    0 -10px 0.1em rgba(0, 255, 55, 0.404),
    5px 5px 0.2em blue;
}

Syntax Examples:


/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;